<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        left: 300px;
        background-color: rgb(255, 254, 254);
        width: 1200px;
        height: 850px;
        box-shadow: 0 0 12px grey;
        top: 30px;
    }
    
    .box1 {
        background-color: #cccccc;
        box-shadow: 0 0 30px grey;
        position: absolute;
        left: 200px;
        bottom: 300px;
        z-index: 1;
    }
    
    .box2 {
        background-color: #e7d0cc;
        width: 350px;
        height: 290px;
        position: absolute;
        left: 260px;
        bottom: 100px;
        padding-left: 40px;
        padding-top: 20px;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 2;
        box-shadow: 0 0 20px grey;
    }
    
    .box3 {
        background-color: #1c1930;
        width: 450px;
        height: 590px;
        position: absolute;
        right: 230px;
        padding-left: 80px;
        padding-top: 120px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .box2 a {
        display: block;
        border: 3px solid white;
        color: rgb(253, 253, 253);
        text-decoration: none;
        width: 150px;
        height: 30px;
        text-align: center;
    }
    
    .h4 {
        font-size: 16px;
    }
    
    .box2 h4 {
        color: rgb(164, 114, 221);
    }
    
    .box3 h4 {
        color: white;
    }
    
    p {
        font-size: 12px;
        width: 200px;
        line-height: 20px;
    }
    
    .box3 p {
        color: rgb(112, 111, 111);
    }
    
    .box3 a {
        text-decoration: none;
        text-align: center;
        color: rgb(102, 201, 231);
        background-color: rgb(253, 252, 252);
        display: block;
        width: 125px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        position: absolute;
        bottom: 180px;
    }
</style>


<body>
    <div class="box">
        <div class="box1">
            <img class="one" src="https://via.placeholder.com/350x350" alt="">
        </div>
        <div class="box2">
            <h4>EXperience</h4>
            <p>Arcut in Arcut in nulla Arcut in nulla Arcut in nullaArcut in nulla Arcut in nulla Arcut in nullaArcut in nulla </p>
            <a href="first">VIEW PORTYOLIO</a>
        </div>
        <div class="box3">
            <h4>Philosophy</h4>
            <p>Arcut in nulla Arcut in nulla Arcut in nullaArut in nulla Arcut in nulla Arcut in nullaArcut in nulla Arcut in nulla Arcut in nullaArcut in nulla</p>
            <a href="second">LEARN MORE</a>
        </div>
    </div>
</body>

</html>